<template>
  <div class="w1 h1 main_content">
    <div class="search-content">
      <Col class="panel search-panel"
        :span="24">
      <Form :model="formHeader"
        :label-width="80"
        inline>
        <FormItem label="企业名称："
          v-if="userRole!='ROLE_DEMO'">
          <Select v-model="formHeader.companyId"
            style="width: 200px;"
            clearable>
            <Option v-for="(item,index) in companyList"
              :value="item.id"
              :label="item.name"
              :key="index"></Option>
          </Select>
        </FormItem>
        <FormItem label="企业名称："
          v-if="userRole=='ROLE_DEMO'">
          <Select v-model="formHeader.companyId"
            style="width: 200px;"
            clearable>
            <Option v-for="(item,index) in companyList"
              :value="item.id"
              :label="item.alias"
              :key="index"></Option>
          </Select>
        </FormItem>
        <FormItem label="事件状态：">
          <RadioGroup v-model="formHeader.type"
            type="button">
            <Radio label="">全部</Radio>
            <!-- <Radio label="1">正常</Radio> -->
            <Radio label="2">预警</Radio>
            <Radio label="3">告警</Radio>
            <Radio label="4">故障</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="处理状态：">
          <RadioGroup v-model="formHeader.state"
            type="button">
            <Radio label="">全部</Radio>
            <Radio label="0">未处理</Radio>
            <Radio label="1">已处理</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem class="margin-left-20">
          <Button type="primary"
            style="margin-left: 10px;"
            @click.stop="_requireThing">查询</Button>
        </FormItem>
      </Form>
      </Col>
    </div>
    <div class="scroll__content alarm_content">
      <Row class="scroll-content__row">
        <!-- 表格 -->
        <Col class="panel table-panel"
          :span="24"
          style="overflow-x: auto;">
        <Table :columns="userRole=='ROLE_DEMO'?columnsOfDemo:columns"
          :data="tableData"
          border
          :loading="pageInfo.loading"></Table>
        </Col>
        <!-- 分页 -->
        <Col class="panel page-panel"
          :span="24"
          style="margin-bottom: 10px;">
        <Page :total="pageInfo.total"
          show-total
          :current.sync="pageInfo.page"
          class="fr"
          @on-change="switchThePaging"
          :page-size="15"></Page>
        </Col>
        <Col span="24"
          class="page-bottom">
        </Col>
        <!-- 新增通知 -->
        <Modal v-model="dialog.add"
          title="新增通知记录"
          width="400">
          <Row>
            <Col span="24">
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">设备名称：</dt>
              <dd class="basicInfo-item value">
                {{selectRow.deviceName}}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">所属企业：</dt>
              <dd class="basicInfo-item value">
                {{selectRow.companyName}}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">事件详情：</dt>
              <dd class="basicInfo-item value">
                {{selectRow.content}}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">发生时间：</dt>
              <dd class="basicInfo-item value">
                {{filterTime(selectRow.createdAt)}}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">通知人：</dt>
              <dd class="basicInfo-item value">
                {{userInfo.name}}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">通知意见：</dt>
              <dd class="basicInfo-item value"
                style="padding: 0;width: 65%;">
                <Input type="textarea"
                  :rows="4"
                  placeholder="请输入通知意见..."
                  v-model="chuliyijian"></Input>
              </dd>
            </dl>
            </Col>
          </Row>
          <div slot="footer">
            <Button @click="dialog.add = false;">取消</Button>
            <Button type="primary"
              @click="confirmAddNewAlarm"
              :disabled="addNewDisabled">确认</Button>
          </div>
        </Modal>
        <!-- 后续通知 -->
        <Modal v-model="dialog.edit"
          width="400"
          :closable="false"
          :styles="{top: '20px'}">
          <Row>
            <h2>通知记录</h2>
            <Col span="24">
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">设备名称：</dt>
              <dd class="basicInfo-item value">
                {{selectRow.deviceName}}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">所属企业：</dt>
              <dd class="basicInfo-item value">
                {{selectRow.companyName}}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">事件详情：</dt>
              <dd class="basicInfo-item value">
                {{selectRow.content}}
              </dd>
            </dl>
            <dl class="basicInfo-block cf">
              <dt class="basicInfo-item name">发生时间：</dt>
              <dd class="basicInfo-item value">
                {{filterTime(selectRow.createdAt)}}
              </dd>
            </dl>
            </Col>
            <Col span="24"
              style="margin-top: 10px;">
            <Table :columns="noticeCol"
              :data="noticeList"></Table>
            </Col>
            <Col span="24"
              style="margin-top: 10px;text-align: center;">
            <Button @click="dialogOfFooter=true">新增后续通知</Button>
            </Col>
          </Row>
          <div slot="footer">
            <Row style="text-align: left;"
              v-if="dialogOfFooter">
              <h2>新增后续通知</h2>
              <Col span="24">
              <dl class="basicInfo-block cf">
                <dt class="basicInfo-item name">通知人：</dt>
                <dd class="basicInfo-item value">
                  {{userInfo.name}}
                </dd>
              </dl>
              <dl class="basicInfo-block cf">
                <dt class="basicInfo-item name">通知意见：</dt>
                <dd class="basicInfo-item value"
                  style="padding: 0;width: 65%;">
                  <Input type="textarea"
                    :rows="4"
                    placeholder="请输入通知意见..."
                    v-model="chuliyijian"></Input>
                </dd>
              </dl>
              </Col>
              <Col span="24"
                style="text-align: center;margin-top: 20px;">
              <Button @click="dialog.edit = false;">取消</Button>
              <Button type="primary"
                @click="confirmAddNewAlarmAgain"
                :disabled="addNewDisabled1">新增</Button>
              </Col>
            </Row>
          </div>
        </Modal>
      </Row>
    </div>
  </div>
</template>
<script>
import {
  getAlarmEventList,
  getCompanyListOfSingle,
  addNewAlarm,
  getAlarmNoticeList
} from '@/api'

import { mapGetters, mapState } from 'vuex'

export default {
  async mounted() {
    await this._getCompanyList()
    this._getAlarmEventList()
  },
  computed: {
    ...mapGetters(['userInfo']),
    ...mapState({
      userRole: state => state.userInfo.rname,
      userId: state => state.userInfo.id
    })
  },
  data() {
    return {
      addNewDisabled: false,
      addNewDisabled1: false,
      formHeader: {
        type: '',
        state: '',
        companyId: ''
      },
      chuliyijian: '',
      companyList: [],
      selectRow: {},
      noticeCol: [
        {
          title: '通知人',
          align: 'center',
          key: 'noticeUser'
        },
        {
          title: '通知内容',
          key: 'noticeContent',
          align: 'center'
        },
        {
          title: '通知时间',
          align: 'center',
          render: (h, params) => {
            const time = params.row.noticeDate
            return h('span', this.filterTime(time))
          }
        }
      ],
      noticeList: [],
      dialog: {
        add: false,
        edit: false
      },
      pageInfo: {
        page: 1,
        total: 0,
        loading: false
      },
      dialogOfFooter: false,
      tableData: [],
      columnsOfDemo: [
        {
          title: '设备名称',
          key: 'deviceAlias',
          align: 'center',
          fixed: 'left',
          width: 120
        },
        {
          title: '类型',
          align: 'center',
          render: (h, params) => {
            const _t = this
            const type = params.row.type
            return _t.filterType(h, type)
          },
          width: 85,
          fixed: 'left'
        },
        {
          title: '所属客户',
          key: 'companyAlias',
          align: 'center',
          minWidth: 110
        },
        {
          title: '区域',
          key: 'groupName',
          minWidth: 110,
          align: 'center'
        },
        {
          title: '设备位置',
          key: 'deviceLocation',
          minWidth: 130,
          align: 'center'
        },
        {
          title: '事件记录',
          key: 'content',
          align: 'center',
          minWidth: 120
        },
        {
          title: '是否通知',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            const disposed = params.row.inform
            return h('span', disposed ? '是' : '否')
          }
        },
        {
          title: '责任人',
          key: 'contactName',
          width: 100,
          align: 'center'
        },
        {
          title: '责任人电话',
          key: 'contactPhone',
          width: 120,
          align: 'center'
        },
        {
          title: '事件时间',
          align: 'center',
          width: 120,
          render: (h, params) => {
            let time = params.row.createdAt
            return h('span', this.filterTime(time))
          }
        },
        {
          title: '是否处理',
          align: 'center',
          width: 100,
          render: (h, params) => {
            const {
              row: { disposed }
            } = params
            return h('span', disposed ? '否' : '是')
          }
        },
         {
          title: '处理时间',
          align: 'center',
          width: 100,
          render: (h, params) => {
            const vm = this
            const {
              row: { updatedAt, disposed }
            } = params
            return h(
              'span',
              disposed
                ? vm.moment(updatedAt).format('YYYY-MM-DD HH:mm:ss')
                : '-'
            )
          }
        },
        {
          title: '操作',
          align: 'center',
          fixed: 'right',
          minWidth: 200,
          render: (h, params) => {
            let domArr = []
            let row = params.row
            const _t = this
            // 有通知
            if (!!row.inform) {
              domArr.push(
                h(
                  'Button',
                  {
                    props: {
                      type: 'success',
                      size: 'small',
                      disabled: true
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        const row = { ...params.row }
                        _t._historyNoticeThing(row)
                      }
                    }
                  },
                  '通知记录'
                )
              )
            } else {
              domArr.push(
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                      disabled: true
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        const row = { ...params.row }
                        _t._noticeThing(row)
                      }
                    }
                  },
                  '通知'
                )
              )
            }
            return h('div', domArr)
          }
        }
      ],
      columns: [
        {
          title: '设备名称',
          key: 'deviceName',
          align: 'center',
          fixed: 'left',
          width: 120
        },
        {
          title: '类型',
          align: 'center',
          render: (h, params) => {
            const _t = this
            const type = params.row.type
            return _t.filterType(h, type)
          },
          width: 85,
          fixed: 'left'
        },
        {
          title: '所属客户',
          key: 'companyName',
          align: 'center',
          minWidth: 110
        },
        {
          title: '区域',
          key: 'groupName',
          minWidth: 110,
          align: 'center'
        },
        {
          title: '设备位置',
          key: 'deviceLocation',
          minWidth: 130,
          align: 'center'
        },
        {
          title: '事件记录',
          key: 'content',
          minWidth: 120,
          align: 'center'
        },
        {
          title: '是否通知',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            const disposed = params.row.inform
            return h('span', disposed ? '是' : '否')
          }
        },
        {
          title: '责任人',
          key: 'contactName',
          width: 100,
          align: 'center'
        },
        {
          title: '责任人电话',
          key: 'contactPhone',
          width: 120,
          align: 'center'
        },
        {
          title: '事件时间',
          align: 'center',
          width: 120,
          render: (h, params) => {
            const time = params.row.createdAt
            return h('span', this.filterTime(time))
          }
        },
        {
          title: '是否处理',
          align: 'center',
          width: 100,
          render: (h, params) => {
            const _t = this
            const row = { ...params.row }
            return h('span', row.disposed ? '是' : '否')
          }
        },
        {
          title: '处理时间',
          align: 'center',
          width: 100,
          render: (h, params) => {
            const vm = this
            const {
              row: { updatedAt, disposed }
            } = params
            return h(
              'span',
              disposed
                ? vm.moment(updatedAt).format('YYYY-MM-DD HH:mm:ss')
                : '-'
            )
          }
        },
        {
          title: '操作',
          align: 'center',
          fixed: 'right',
          minWidth: 200,
          render: (h, params) => {
            let domArr = []
            let row = params.row
            const _t = this
            // 有通知
            if (!!row.inform) {
              domArr.push(
                h(
                  'Button',
                  {
                    props: {
                      type: 'success',
                      size: 'small',
                      disabled: _t.userRole == 'ROLE_DEMO'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        const row = { ...params.row }
                        _t._historyNoticeThing(row)
                      }
                    }
                  },
                  '通知记录'
                )
              )
            } else {
              domArr.push(
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                      disabled: _t.userRole == 'ROLE_DEMO'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        const row = { ...params.row }
                        _t._noticeThing(row)
                      }
                    }
                  },
                  '通知'
                )
              )
            }
            return h('div', domArr)
          }
        }
      ]
    }
  },
  methods: {
    filterTime(time) {
      return this.moment(time).format('YYYY-MM-DD HH:mm:ss')
    },

    // 查询事件
    _requireThing() {
      let vm = this
      vm.pageInfo.page = 1
      this._getAlarmEventList()
    },

    // 类型过滤器
    filterType(h, type) {
      switch (type) {
        case 1:
          return h(
            'Tag',
            {
              props: {
                color: 'green'
              }
            },
            '正常'
          )
          break
        case 2:
          return h(
            'Tag',
            {
              props: {
                color: 'yellow'
              }
            },
            '预警'
          )
          break
        case 3:
          return h(
            'Tag',
            {
              props: {
                color: 'red'
              }
            },
            '告警'
          )
          break
        case 4:
          return h(
            'Tag',
            {
              props: {
                color: 'grey'
              }
            },
            '故障'
          )
          break
      }
    },

    // 切换分页
    switchThePaging(index) {
      this.pageInfo.page = index
      this._getAlarmEventList()
    },

    // 获取城市列表
    _getCompanyList() {
      let params = {},
        vm = this
      return new Promise((resolve, reject) => {
        getCompanyListOfSingle(params).then(res => {
          if (res.code == 200) {
            vm.companyList = res.data
            resolve()
          }
        })
      })
    },

    // 获取报警事件列表
    _getAlarmEventList() {
      const _t = this
      _t.pageInfo.loading = true
      const params = Object.assign({}, _t.formHeader, {
        page: _t.pageInfo.page,
        size: 15
      })
      getAlarmEventList(params).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list
          this.pageInfo.total = res.data.total
          setTimeout(() => {
            _t.pageInfo.loading = false
          }, 500)
        }
      })
    },

    // 通知
    _noticeThing(row) {
      this.selectRow = { ...row }
      this.chuliyijian = ''
      this.dialog.add = true
    },

    // 确定通知
    confirmAddNewAlarm() {
      const vm = this
      this.addNewDisabled = true
      const params = {
        exceptionId: vm.selectRow.id,
        userId: vm.userId,
        content: vm.chuliyijian
      }
      addNewAlarm(params).then(res => {
        if (res.code == 200) {
          vm.$Message.success('操作成功')
          vm.chuliyijian = ''
          vm.dialog.add = false
          this.addNewDisabled = false
          vm._getAlarmEventList()
        } else {
          this.addNewDisabled = false
        }
      })
    },

    // 确定再次增加通知
    confirmAddNewAlarmAgain() {
      let vm = this
      this.addNewDisabled1 = true
      const params = {
        exceptionId: vm.selectRow.id,
        content: vm.chuliyijian
      }
      addNewAlarm(params).then(res => {
        if (res.code == 200) {
          vm.$Message.success('操作成功')
          vm.chuliyijian = ''
          vm.dialog.edit = false
          vm.dialogOfFooter = false
          vm.addNewDisabled1 = false
          vm._getAlarmEventList()
        } else {
          vm.$Message.error(res.message)
          vm.addNewDisabled1 = false
        }
      })
    },

    // 获取事件通知列表
    _getAlarmNoticeList() {
      const _t = this
      const params = {
        exceptionId: _t.selectRow.id
      }
      getAlarmNoticeList(params).then(res => {
        if (res.code == 200) {
          this.noticeList = res.data
        }
      })
    },

    _historyNoticeThing(row) {
      this.selectRow = { ...row }
      this.dialog.edit = true
      this.dialogOfFooter = false
      this._getAlarmNoticeList()
    }
  }
}
</script>
